<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Loading动画</title>
	</head>
	<body>
		<style type="text/css">
			.loading{
				width: 400px;
				height: 200px;
				text-align: center;
				margin-top: 200px;
				margin-left: 400px;
				background-color: black;
				/*position: relative;*/
				/*transition: all 1s;*/
				perspective: 50px;
			}
			.loading span{
				color: #88e5fb;
				font-size: 18px;
				font-weight: bold;
				line-height: 200px;
			}
			
			.L{
				transition: all 1s;
				/*transform: translateY(20px);*/
			}
			.L:hover{
				transform: translateY(20px);
			}
			.O{
				transform: translateY(-10px);
			}
			.A{
				transform: translateY(0px);
			}
			.D{
				transform: translateY(30px);
			}
			.I{
				transform: translateY(50px);
			}
			.N{
				transform: translateY(20px);
			}
			.G{
				transform: translateY(0px);
			}
			/*.loading:hover{
				transform: translateY(100px);
			}*/
		</style>
		
		<div class="loading">
			
			<span class="L">L</span>
			<span class="O">O</span>
			<span class="A">A</span>
			<span class="D">D</span>
			<span class="I">I</span>
			<span class="N">N</span>
			<span class="G">G</span>
			
		</div>
	</body>
</html>
